<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
	</head>
	<body>
		<div class="mui-content">
			<div class="mui-input-row" style="margin: 10px 5px;">
				<textarea id="textarea" rows="2" placeholder="" class="mui-input-clear"></textarea>
				<textarea id="replacedText" rows="2" placeholder=""></textarea>
				<button class="mui-btn" id="copyBut" data-clipboard-target="#replacedText">复制</button>
			</div>
		</div>

	</body>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
	<script>
		var btn = document.getElementById('copyBut');
		var clipboard = new ClipboardJS(btn);

		clipboard.on('success', function(e) {
			clearText()
			console.log(e);
		});

		clipboard.on('error', function(e) {
			console.log(e);
		});

		$('#textarea').bind('input propertychange', () => {
			var text = $("#textarea").val();
			$("#replacedText").val(text.replace(/ /g, "").replace(/(.{1})/g, "$1 "))
		});
		
		function clearText(){
			$("#textarea").val("")
			$("#replacedText").val("")
		}
	</script>
</html>
